<template>
  <div class="directive-demo">
    <h1>Vue 自定义指令示例</h1>
    
    <!-- 1. 自动聚焦指令 -->
    <section>
      <h2>1. v-focus 自动聚焦</h2>
      <input v-focus type="text" placeholder="页面加载时自动聚焦">
    </section>
    
    <!-- 2. 防抖指令 -->
    <section>
      <h2>2. v-debounce 防抖</h2>
      <input 
        v-debounce:500="handleInput" 
        type="text" 
        placeholder="输入时500ms防抖"
      >
      <p>输入内容: {{ debounceText }}</p>
    </section>
    
    <!-- 3. 限制输入指令 -->
    <section>
      <h2>3. v-limit 限制输入</h2>
      <input 
        v-limit="10" 
        type="text" 
        placeholder="最多输入10个字符"
      >
    </section>
    
    <!-- 4. 拖动指令 -->
    <section>
      <h2>4. v-drag 拖动</h2>
      <div 
        v-drag 
        style="width: 100px; height: 100px; background: #3498db; color: white;"
      >
        拖动我
      </div>
    </section>
    
    <!-- 5. 权限控制指令 -->
    <section>
      <h2>5. v-permission 权限控制</h2>
      <button v-permission="'admin'">管理员按钮</button>
      <button v-permission="'user'">普通用户按钮</button>
      <p>当前角色: {{ currentRole }}</p>
      <button @click="toggleRole">切换角色</button>
    </section>
    
    <!-- 6. 点击外部隐藏指令 -->
    <section>
      <h2>6. v-click-outside 点击外部隐藏</h2>
      <button @click="showBox = !showBox">
        {{ showBox ? '隐藏' : '显示' }}下拉框
      </button>
      <div 
        v-if="showBox" 
        v-click-outside="() => showBox = false"
        style="width: 200px; height: 100px; border: 1px solid #ccc; margin-top: 10px;"
      >
        点击外部关闭我
      </div>
    </section>
    <div v-clickout="hideMenu">Menu</div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'SelfDefDirective',
  setup() {
    const debounceText = ref('')
    const currentRole = ref('admin')
    const showBox = ref(false)
    
    const handleInput = (e) => {
      debounceText.value = e.target.value
    }
    
    const toggleRole = () => {
      currentRole.value = currentRole.value === 'admin' ? 'user' : 'admin'
    }
    
    return {
      debounceText,
      currentRole,
      showBox,
      handleInput,
      toggleRole
    }
  },
  directives: {
    // 1. 自动聚焦指令
    focus: {
      mounted(el) {
        el.focus()
      }
    },
    
    // 2. 防抖指令
    debounce: {
      mounted(el, binding) {
        let timer = null
        const delay = parseInt(binding.arg) || 300
        
        el.addEventListener('input', (e) => {
          clearTimeout(timer)
          timer = setTimeout(() => {
            binding.value(e)
          }, delay)
        })
      }
    },
    
    // 3. 限制输入指令
    limit: {
      mounted(el, binding) {
        const maxLength = binding.value
        
        el.addEventListener('input', () => {
          if (el.value.length > maxLength) {
            el.value = el.value.slice(0, maxLength)
          }
        })
      }
    },
    
    // 4. 拖动指令
    drag: {
      mounted(el) {
        el.style.cursor = 'move'
        
        el.onmousedown = (e) => {
          const disX = e.clientX - el.offsetLeft
          const disY = e.clientY - el.offsetTop
          
          document.onmousemove = (e) => {
            const left = e.clientX - disX
            const top = e.clientY - disY
            
            el.style.left = left + 'px'
            el.style.top = top + 'px'
            el.style.position = 'absolute'
          }
          
          document.onmouseup = () => {
            document.onmousemove = null
            document.onmouseup = null
          }
        }
      }
    },
    
    // 5. 权限控制指令
    permission: {
      mounted(el, binding) {
        const permission = binding.value;
        const userPermissions = ['admin','editor'];
        if(!userPermissions.includes(permission)){
          el.style.display = 'none';
        }

      }
    },
    
    // 6. 点击外部隐藏指令
    'click-outside': {
      mounted(el, binding) {
        el.__clickOutsideHandler__ = (e) => {
          if (!el.contains(e.target)) {
            binding.value()
          }
        }
        document.addEventListener('click', el.__clickOutsideHandler__)
      },
      unmounted(el) {
        document.removeEventListener('click', el.__clickOutsideHandler__)
      }
    },
    clickout: {
      mounted(el, binding) {
        const handler = (e)=>{
            if (!el.contains(e.target)) {
                binding.value();
            }
        };
        document.addEventListener('click', handler);
        el.__clickOutsideHandler = handler;
      },
      unmounted(el) {
        document.removeEventListener('click', el.__clickOutsideHandler);
      },
    }
  }
}
</script>

<style scoped>
.directive-demo {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

section {
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
}

input {
  padding: 8px;
  margin-right: 10px;
  width: 300px;
}

button {
  padding: 8px 15px;
  margin-right: 10px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #2980b9;
}
</style>